<template>
  <div class="dashboard-folder">
    <div class="tools no-user-select">
      <a-dropdown
        class="tool"
        overlayClassName="ant-dropdown-custom"
        :trigger="['click']"
        placement="bottomLeft"
        :visible="visibles.display"
        @visibleChange="visibleChange('display', $event)"
      >
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          {{ tools.display.items[tools.display.seleced[0]] }}
          <icon v-if="!visibles.display" name="icon-xiala" />
          <icon v-else name="icon-shagnla" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item v-for="(value, key) in tools.display.items" :key="key">
            <a href="javascript:;">{{ value }}</a>
            <icon v-if="tools.display.seleced.indexOf(key) > -1" name="icon-xuanzhong2" />
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <a-dropdown
        class="tool"
        overlayClassName="ant-dropdown-custom"
        :trigger="['click']"
        placement="bottomLeft"
        :visible="visibles.sorts"
        @visibleChange="visibleChange('sorts', $event)"
      >
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          {{ tools.sorts.items[tools.sorts.seleced[0]] }}
          <icon v-if="!visibles.sorts" name="icon-xiala" />
          <icon v-else name="icon-shagnla" />
        </a>
        <a-menu slot="overlay">
          <template v-for="(value, key) in tools.sorts.items">
            <a-divider v-if="value == '_divider'" />
            <a-menu-item v-else :key="key">
              <a href="javascript:;">{{ value }}</a>
              <icon v-if="tools.sorts.seleced.indexOf(key) > -1" name="icon-xuanzhong2" />
            </a-menu-item>
          </template>
        </a-menu>
      </a-dropdown>
      <!--

      全部设备（手机、iPhone、Android、平板、网页/电视、watch、其他设备、自定义）
      列表 -->
      <div class="tool pointer">
        <icon name="icon-datuxianshi" />
        列表
      </div>
    </div>
    <!-- end .tools -->
    <!-- 详细列表 -->
    <div class="folder-list folder-detail-list no-user-select">
      <div class="folder-title">
        <div class="col1 name">名称</div>
        <div class="col2 count">项目/页面数</div>
        <div class="col3 time">创建时间</div>
      </div>
      <div class="data pointer" @click="e=>e.preventDefault()">
        <div class="col1 name">
          <icon name="icon-wenjianjia-zhankai" />
          南京紫枫
          <icon @click.stop="e=>e.preventDefault()" class="name-edit pointer" name="icon-xiugai" />
        </div>
        <div class="col2 count ">9</div>
        <div class="col3 time">2020/10/29 22:43:42</div>
      </div>
    </div>
    <!-- end 详细列表 -->
  </div>
</template>

<script>
export default {
  name: 'dashboard-folder',
  // 要求：排序、
  props: {
    list: {
      type: Array,
      default: () => {
        return [
          {
            type: 'folder',
            name: '字符尚云',
            count: 9,
            ctime: '1603378887',
            utime: '1603378887',
            status: 'lock',
            // all/web/mobile/custom
            device: 'all',
            config: {
              color: '#F0A492'
            }
          },
          {
            type: 'protoytpe',
            name: '原型设计',
            count: 9,
            ctime: '1603378887',
            utime: '1603378887',
            status: 'normal',
            // 设备
            device: 'web',
            config: {
              avatar: '封面'
            }
          },
          {
            type: 'xmind',
            name: '思维道导图',
            count: 9,
            ctime: '1603378887',
            utime: '1603378887',
            status: 'normal',
            device: 'all',
            config: {
              avatar: '封面'
            }
          }
        ];
      }
    }
  },
  methods: {
    visibleChange: function(type, e) {
      this.$set(this.visibles, type, e);
    }
  },
  data: function() {
    return {
      visibles: {
        display: false,
        sorts: false
      },
      tools: {
        // 显示
        display: {
          items: {
            folder: '文件夹',
            project: '项目',
            lock: '锁定'
          },
          // 默认
          seleced: ['folder', 'project', 'lock']
        },
        // 排序（更新时间、创建时间、名称、升序、降序）
        sorts: {
          items: {
            utime: '更新时间',
            ctime: '创建时间',
            type1: '_divider',
            name: '名称',
            type2: '_divider',
            asc: '升序',
            desc: '降序'
          },
          // 默认 0: 类别，1：排序方式
          seleced: ['utime', 'desc']
        }
      }
    };
  }
};
</script>

<style lang="less">
.ant-dropdown-custom {
  .ant-dropdown-menu {
    border-radius: 2px;
    .ant-dropdown-menu-item {
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;
      // transition: all 0.15s ease-out 0s;
      font-size: 12px;
      .icon {
        margin-left: 6px;
      }
    } // end li
    .ant-divider {
      margin: 3px 0;
    }
  }
}
</style>
<style lang="less" scoped>
.dashboard-folder {
  width: 100%;
  height: 100%;

  .tools {
    display: flex;
    justify-content: flex-end;

    .tool {
      margin-left: 1em;
    }
  } // end .tools
  .folder-list.folder-detail-list {
    margin-left: 26px;
    >.folder-title,>.data {
      display: flex;
      align-items: center;
      .col1 {
        flex: 1;
      }
      .col2,
      .col3 {
        width: 15%;
        min-width: 150px;
      }
    }// end .folder-title
    .data{
      height: 30px;
      padding: 7px 0;
      border-top: 1px solid rgb(232, 232, 232);
      .col1 {
        font-size: 13px;
        .icon{
          margin: 0 6px;
          width: 19px;
          height: 19px;
        }
        .name-edit{
          display: none;
        }
      }
      .col2,.col3{
        font-size: 0.87rem;
      }
    }// end .data
    .data:hover{
      .name-edit{
        display: inline-block;
      }
    }
  } // end .folder-list.folder-detail-list
}
</style>
